<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Family账本 - 未登录</title>
	<link rel="stylesheet" media="screen" href="${path }/static/css/背景/style.css">
	<link rel="stylesheet" media="screen" href="${path }/static/css/背景/zhuStyle.css">
	<link rel="shortcut icon" href="${path }/static/img/账本logo.png">
    <link href="${path }/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${path }/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${path }/static/css/animate.min.css" rel="stylesheet">
    <link href="${path }/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="${path }/static/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    
    <!-- 登陆弹窗 -->
    <link rel="stylesheet" href="${path }/static/css/lanrenzhijia.css" media="all">
    <script src="${path }/static/js/jquery.min.js"></script>
	<script>
		jQuery(document).ready(function($) {
			$('.theme-login').click(function(){
				$('.theme-popover-mask').fadeIn(100);
				$('.theme-popover').slideDown(200);
			})
			$('.theme-poptit .close').click(function(){
				$('.theme-popover-mask').fadeOut(100);
				$('.theme-popover').slideUp(200);
			})
		
		})
	</script>
</head>
<body id = "particles-js">
	<div style="background: rgb(255,255,255); width: 360px;height: 240px; position: absolute;top:50%;left: 50%;margin-left:-200px;margin-top:-200px;">
		<form method="post" action="${path }/DoLogin" >
			<div class="div1" style="width: 240px; height: 20px; margin-left: 120px; margin-top: 18px;">
				<span style="font-size: 20px">账号密码登陆</span>
			</div>
			<div class="div1" style="width: 200px; height: 38px; margin-top: 20px; margin-left: 80px;">
				<input name="username" type="text" class="form-control" placeholder="用户名" required>
			</div>
			<div class="div1" style="width: 200px; height: 38px; margin-top: 10px; margin-left: 80px;">
				<input name = "password" type="password" class="form-control" placeholder="密码" required>
			</div>
			<div class="div1" style="width: 200px; height: 38px; margin-top: 10px; margin-left: 80px;">
				<button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
			</div>
			<div class="theme-buy" style="float:right; width: 140px; height: 16px; margin-top: 20px;">
				没有账号？现在&nbsp;<a href="javascript:;" class="theme-login" style="text-decoration:underline;">注册</a>
			</div>
		</form>

		<div class="theme-popover">
			<div class="theme-poptit">
				<a href="javascript:;" title="关闭" class="close">×</a>
				<h4>注 册</h4>
			</div>
			<div class="theme-popbod dform">
				<form class="theme-signin" name="loginform" action="${path }/DoRegister?jump=/ToLogin" method="post">
					<ol>
						<!-- <li><h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户注册</h4></li> -->
						<li><strong>用户名：</strong><input required class="form-control" type="text" name="username_register" size="20" style="width: 200px;height: 28px" /></li>
						<li><strong>密码：</strong><input required class="form-control" type="password" name="password_register"  size="20" style="width: 200px;height: 28px" /></li>
						<!-- <li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="" size="20" /></li> -->
						<li>
							<strong>所属家庭：</strong>
							<select name = "family" class="form-control m-b" style="width: 200px;height: 32px;">
								<c:forEach items = "${list }" var = "u">
							      <option>${u.name }</option>
								</c:forEach>
							 </select>
						</li>
						<li>
							<div class="div1" style="width: 200px; height: 38px; ">
								<button class="btn btn-primary block full-width m-b" type="submit" name="submit" style="width: 200px;height: 28px" >注 册</button>
							</div>
						</li>
						<li><h6>没有找到你的家庭？快添加一个吧！</h6></li>
						<li>
							<strong>添加家庭：</strong><input class="form-control" type="text" id = "family_name" name="family_name" size="20" style="width: 200px;height: 28px" />
						</li>
						<li>
							<div class="div1" style="width: 200px; height: 28px; ">
								<button  onclick="doAddFamily()" class="btn btn-primary block full-width m-b" type="button">添 加</button>
							</div>
						</li>
					</ol>
				</form>
			</div>
		</div>
		<div class="theme-popover-mask"></div>

	</div>

	<script>
		var msg = '${msg}';
		if(msg == "添加成功" || msg == "注册成功") {
			$(function() {
            	toastr.success(msg, "success"); // Wire up an event handler to a button in the toast, if it exists
            })
		}else if(msg == "添加失败" || msg == "密码错误" || msg == "注册失败" || msg == "该用户名不存在") {
			$(function() {
            	toastr.error(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}else if(msg == "该家庭已存在" || msg == "该用户已存在") {
			$(function() {
            	toastr.warning(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}
	
		function doAddFamily() {
			var family_name = document.getElementById("family_name").value;
			if(family_name != null && family_name != "") {
				window.location.href="${path}/DoAddFamily?family_name="+family_name;
			}
		}
	</script>
	<script src="${path }/static/js/背景/particles.js"></script>
	<script src="${path }/static/js/背景/app.js"></script>
	<script src="${path }/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${path }/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${path }/static/js/plugins/toastr/toastr.min.js"></script>
</body>
</html>